<template>
  <div class="basic-top">
    <div class="top-bg">
      <div class="w1200">
        <div class="top-bg-btn">
        <span v-for="(it, i) in actions" :key="i" @click="it.click">{{
          it.name
        }}</span>
      </div>
      </div>
    </div>

    <div class="logo-search">
      <div class="logo">
        <img src="@/assets/logo-big.png" @click="gotoRouter('/', $router)" />
      </div>

      <div class="search">
        <div class="field has-addons">
          <div class="control">
            <input
              class="input is-rounded cus-input"
              v-model="searchName"
              :class="{ w900: useRoute().name === 'search' }"
              type="text"
              placeholder="查找您想要的软件"
            />
          </div>
          <div class="control" @click="doSearch">
            <a class="button is-info is-rounded"> 搜索 </a>
          </div>
        </div>

        <div class="search-history" v-if="useRoute().name !== 'search'">
          <span
            v-for="(it, i) in history"
            :key="i"
            @click="searchHistory(it)"
            >{{ it }}</span
          >
        </div>
      </div>
    </div>

    <div class="nav-bar" v-if="useRoute().name !== ('search' || 'information')">
      <div class="nav-tab">
        <div
          class="tab-one"
          v-for="(it, i) in myTabs[curTab]"
          :class="{ cur: isCur(it)}"
          :key="i"
          @click="gotoRouter(it.router, $router, it.params, it.routerName)"
          @mouseover="
            () => {
              if (it.name === '手机游戏') showMobile = true;
            }
          "
          @mouseleave="
            () => {
              if (it.name === '手机游戏') showMobile = false;
            }
          "
        >
          <span
            >{{ it.name
            }}<i v-if="it.name === '手机游戏'" class="el-icon-arrow-down"></i
          ></span>
          <div
            @click.stop="
              gotoRouter(
                '/game/mobile-index.html',
                $router,
                { param: '384_407_0_1' },
                'game-mobile-index'
              )
            "
            class="molile"
            v-if="showMobile && it.name === '手机游戏'"
          >
            手机游戏列表
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const router = useRouter();
const route = ref(useRoute());
const searchName = ref("");
const showMobile = ref(false);
// 右边操作
const myAlert = () => {
  ElMessageBox.alert("暂未开放", "提示", {
    type: "warning",
    "confirm-button-text": "确定",
  });
};
const keybordObj = (title) => {
  var url = window.location.href;
  try {
    window.external.addFavorite(url, title);
  } catch (e) {
    try {
      window.sidebar.addPanel(title, url, "");
    } catch (e) {
      ElMessageBox.alert(
        "收藏失败，此操作被浏览器拒绝！\n请使用Ctrl+D进行收藏！",
        "提示",
        {
          type: "warning",
          "confirm-button-text": "确定",
        }
      );
      // alert("收藏失败，此操作被浏览器拒绝！\n请使用Ctrl+D进行收藏！");
    }
  }
};

const addFavorite = () => {
  // window.external.addFavorite("baidu","111")
  keybordObj("111");

  // console.log(keybordObj);
};
const actions = ref([
  {
    name: "登录",
    click: myAlert,
  },
  {
    name: "注册",
    click: myAlert,
  },
  {
    name: "收藏本站",
    click: addFavorite,
  },
]);

// 右边操作
const history = ref(["2345浏览器", "谷歌浏览器", "飞书"]);

// tabs
const tabs = ref([
  {
    name: "首页",
    router: "/",
  },
  {
    name: "PC软件",
    router: "/page/387_0_0_0_1.html",
  },
  {
    name: "安卓软件",
    router: "/android/532_534_0_1.html",
  },
  {
    name: "IOS软件",
    router: "/ios/533_535_0_1.html",
  },
  {
    name: "游戏",
    router: "/game/index.html",
    params: { type: 1 },
  },
  {
    name: "科技资讯",
    router: "/information/index.html",
  },
  {
    name: "软件教程",
    router: "/",
  },
  {
    name: "论坛",
    router: "/",
  },
]);
const gameTabs = ref([
  {
    name: "游戏首页",
    router: "/game/index.html",
    params: { type: 1 },
    routerName: "game-index",
  },
  {
    name: "单机游戏",
    routerName: "game-alone-ist",
    router: "/game/alone-list.html",
    params: {param: '389_409_422_1_pop'},
  },
  {
    name: "手机游戏",
    routerName: "game-mobile-list",
    router: "/game/mobile-list.html",
    params: { param: "384_407_0_1" },
  },
  {
    name: "网页游戏",
    router: "/game/web-list.html",
    params: { param: "389_410_446_1_pop" },
    routerName: "game-web-list",
  },
  {
    name: "网络游戏",
    routerName: "game-alone-ist",
    router: "/game/alone-list.html",
    params: {param:"389_397_422_1_pop"},
  },
  {
    name: "游戏攻略",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: "386",
      secondId: "412",
      thirdId: "0",
      param: "386_412_0",
      type: "0",
    },
  },
]);
const infoTabs = ref([
  {
    name: "资讯首页",
    routerName: "information",
    router: "/information/index.html",
  },
  {
    name: "IT业界",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: 386,
      secondId: 415,
      thirdId: 526,
      type: 526,
      param: "386_415_526",
    },
  },
  {
    name: "手机数码",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: 386,
      secondId: 415,
      thirdId: 436,
      type: 436,
      param: "386_415_436",
    },
  },
  {
    name: "游戏资讯",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: 386,
      secondId: 415,
      thirdId: 493,
      type: 493,
      param: "386_415_493",
    },
  },
  {
    name: "娱乐资讯",
    router: "/information/list.html",
    routerName: "information-list",
    params: {
      firstId: 386,
      secondId: 415,
      thirdId: 461,
      type: 461,
      param: "386_415_461",
    },
  },
]);
const myTabs = ref({
  tabs: tabs.value,
  gameTabs: gameTabs.value,
  infoTabs: infoTabs.value,
});
const curTab = ref("tabs");
// const goToRouter = (path) => {
//   router.push({ path });
// };
const isCur = (it) =>{
  if(curTab.value==='tabs'){
    return it.params && it.params.type == route.value.params.type
  }else if(curTab.value==='gameTabs'){
    return (route.value.path.includes(it?.params?.param?.split('_')[1])||(it.name==='游戏首页'&&!route.value.path.includes('_')))
  }else {
    return (route.value.path.includes(it?.params?.param?.split('_')[2])||(it.name==='资讯首页'&&!route.value.path.includes('_')))
  }
}
const doSearch = () => {
  const { href } = router.resolve({
    name: `search`,
    params: {
      name: searchName.value,
    },
  });
  window.open(href, "_blank");
  // router.push({
  //   name: "search",
  //   params: {
  //     name: searchName.value,
  //   },
  // });
};
const searchHistory = (name) => {
  searchName.value = name;
  doSearch();
};
watch(
  () => route.value.path,
  () => {
    searchName.value = route.value.params.name;
    if (route.value.name.includes("game")) {
      curTab.value = "gameTabs";
    } else if (route.value.name.includes("information")) {
      curTab.value = "infoTabs";
    } else {
      curTab.value = "tabs";
    }
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.basic-top {
  background: #fff;
}

.nav-bar {
  display: flex;
  height: 44px;
  background: @theme-color;

  .nav-tab {
    height: 100%;
    display: flex;
    width: 1200px;
    margin: auto;
  }

  .tab-one {
    height: 100%;
    width: 140px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .tab-one:hover {
    background: @theme-bold-color;
  }
  .cur {
    background: @theme-bold-color;
  }
}

.logo-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 112px;
  width: 1200px;
  margin: auto;
  .search {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
  }

  .logo {
    img {
      cursor: pointer;
      width: 254px;
      height: 70px;
      object-fit: contain;
    }
  }

  .cus-input {
    width: 348px;
    box-shadow: none;
    border-color: @theme-wight-color;
  }
  .cus-input:focus {
    border-color: @theme-color;
  }
  .cus-input:active {
    border-color: @theme-color;
    box-shadow: none;
  }
  .button {
    background: @theme-color;
  }

  .search-history {
    display: flex;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #93999e;
      line-height: 12px;
      margin: 0 5px;
      cursor: pointer;
    }
    span:hover {
      color: @link-color;
    }
  }
}
.w1200 {
  display: inline-block;
  width: 1200px;
  height: 40px;
  line-height: 40px;
}
.top-bg {
  width: 100vw;
  height: 40px;
  background: #f5f7f8;
  text-align: center;

  .top-bg-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    span {
      font-size: 14px;
      font-weight: 400;
      color: #545759;
      line-height: 14px;
      margin: 0 5px;
      cursor: pointer;
    }

    span:hover {
      color: @link-color;
    }

    span::after {
      content: "|";
      margin-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #545759;
      line-height: 14px;
    }
    span:last-child::after {
      display: none;
    }
  }
}
.molile {
  margin-top: 88px;
  position: absolute;
  display: inline-block;
  width: 140px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #399242;
  border: 1px solid #eee;
  z-index: 9999;
}
</style>
